架空の結婚式場LPサイト

コーディングしたデータ：https://katsuragimayuka.com/practice/lumiere-naturel

デザインコンセプト

Fullmeという動画でWebデザインを学べる学習教材の課題として制作いたしました。「ガーデンウエディングの結婚式場のLPサイト」という課題のもとヒアリングシートとサイトテキストをご提供いただき、ワイヤーフレーム設計とデザインカンプ制作、コーディングをいたしました。

ご提供いただいたヒアリングシートを拝見して「緑豊かな自然とアットホームな雰囲気を感じる温かみのあるナチュラルなデザイン」というデザインコンセプトを設定いたしました。（実際に制作したFigmaデータ）

デザインについて

ワイヤーフレーム設計が初めてだったため、まずは様々な結婚式場のWebサイトを見て構成を学ぶところから始めました。課題のサイトテキストには「Lumiere Naturelについて」と「アクセス」の記載はなかったのですが、資料請求のCTAエリアを設置することと、結婚式場の場所を記すことは重要だと思い追加いたしました。

ナチュラルさを出せるようメインカラーはベージュ、ベースカラーはオフホワイト、アクセントカラーに深みのあるグリーンを選びました。

レスポンシブ対応にしたかったため、結婚式場やイメージが合うWebサイトを見てスマートフォン表示のときはどのように対応させているのかを見て参考にいたしました。

コーディングについて

自分が制作したデザインカンプをコーディングすることが初めてだったのですが、デザインカンプ完成時は「完璧だ！」と思っていたのに上下左右の余白がずれていたり、写真の大きさが違ったりと気付きが多くありました。

レスポンシブ対応にしたかったのですがいざコーディングとなると、どうしたら再現できるのかがわからない箇所が多々あり大変苦戦いたしました。ネットや書籍で調べながらコーディングをしたため多大な時間がかかってしまいましたが、調べるうちに知らなかった再現方法を知ることができたため一歩でも成長できたのではないかと感じております。

JavaScriptについては深く考えずに単調なアニメーションを付けてしまったため、心地よいと感じる動きのWebサイトをたくさん見て「なぜこのコンテンツはこのアニメーションなのか」を論理的に考えて引き出しを増やしていく必要があると、今後の課題に気付くことができました。